<template>

	<view class="normal-login-container">

		<image class="deco1" src="/static/img/deco1.png" mode=""></image>
		<image class="deco2" src="/static/img/deco2.png" mode=""></image>
		<view>
			<view class="logo1">
				<image src="/static/img/logo.png" mode=""></image>
			</view>
			<view class="subTit">
				注册圣牧有机店主订购平台
			</view>
			<view v-if="doing" class="login-form-content">
				<form @submit.prevent="submit">
					<view class="input-item ">
						<input v-model="nickname" class="input" type="text" required placeholder="请输入公司名称" />
					</view>
					<view class="input-item ">
						<input v-model="realName" class="input" type="text" required placeholder="请输入姓名" maxlength="11" />
					</view>
					<view class="input-item ">
						<input v-model="account" class="input" type="number" required placeholder="请输入手机号码" />
					</view>

					<view class="action-btn">
						<button @click="register" class="login-btn">注册</button>
					</view>
				</form>
			</view>
			<!-- <view class="">
				<view class="doings">
					审核中，请耐心等待...
				</view>
				<view class=" doings refuse">
					恭喜您，审核已经通过！
					<view class="action-btn">
						<button @click="logins" class="login-btn1">去登录</button>
					</view>
				</view>
				<view class="doings refuse">
					很遗憾，申请被拒绝！
					<view class="action-btn">
						<button @click="doing=true" class="login-btn1">重新申请</button>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		login,
		loginMobile,
		registerVerify,
		register
	} from '@/api/user'
	import attrs, {
		required,
		alpha_num,
		chs_phone
	} from '@/utils/validate'
	import {
		validatorDefaultCatch
	} from '@/utils/dialog'
	import dayjs from 'dayjs'
	import cookie from '@/utils/store/cookie'

	import {
		handleGetUserInfo
	} from '@/utils'

	const BACK_URL = 'login_back_url'

	export default {
		name: 'Login',

		data: function() {
			return {
				doing:true,
				navList: ['手机号登录'],
				// navList: ["手机号登录",],
				current: 0,
				nickname: '',
				account: '',
				realName: '',

				password: '',
				captcha: '',
				inviteCode: '',
				formItem: 1,
				type: 'login',
				timer: null,
				clock: 60,
				clockText: '获取验证码',
				isChecked: false
			}
		},
		methods: {
			logins(){
				uni.reLaunch({
					url:'/pages/user/Login/login'
				})
			},
			async loginMobile() {
				

				var that = this
				const {
					nickname,
					realName,
					account
					// captcha
				} = that
				
				// console.log(nickname,
				// 	name,
				// 	account,44444444444)
				// try {
				// 	await that.$validator({
				// 	  account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
				// 	  captcha: [required(required.message('验证码')), alpha_num(alpha_num.message('验证码'))],
				// 	})
				// 	.validate({
				// 	  account,
				// 	  captcha,
				// 	})
						// .$validator({
						// 	nickname: [required(required.message('公司名称')), chs_alpha(chs_alpha.message())],
						// 	name: [required(required.message('姓名'))],
						// 	account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
						// })
						// .validate({
						// 	nickname,
						// 	name,
						// 	account
						// })

					// .$validator({
					// 	nickname: [required(required.message('公司名称'))],
					// 	name: [required(required.message('姓名'))],
					// 	account: [required(required.message('验证码')), account(chs_phone.message())],
					// })
					// .validate({
					// 	nickname,
					// 	name,
					// 	account,

					// })
				// } catch (e) {
				// 	return validatorDefaultCatch(e)
				// }
				loginMobile({
						nickname: that.nickname,
						account: that.account,
						realName: that.realName,
						spread: cookie.get('spread'),
					})
					.then(res => {
						
						console.log(res,7777)
						// this.$store.commit('login', res.data.token, dayjs(res.data.expires_time))
						// handleGetUserInfo()
					})
					.catch(err => {
						uni.showToast({
							title: res.msg || res.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000,
						})
					})

			},
			async register() {
				var that = this
				const {
				
					nickname,
					realName,
					account,
					// captcha,
					// password
				} = that
				try {
					await that
						.$validator({
							nickname: [required(required.message('公司名称'))],
							realName: [required(required.message('真实姓名'))],
							account: [required(required.message('手机号码')), chs_phone(chs_phone.message())],
							
							// name: [required(required.message('密码')), attrs.range([6, 16], attrs.range.message(
							// 	'密码')), alpha_num(alpha_num.message('密码'))],
						})
						.validate({
							nickname,
							account,
							realName,
							
							
							// captcha,
							// password,
						})
				} catch (e) {
					return validatorDefaultCatch(e)
				}
				register({
						account: that.account,
						nickname: that.nickname,
						realName:that.realName,
						// captcha: that.captcha,
						// password: that.password,
						// inviteCode: that.inviteCode,
						spread: cookie.get('spread'),
					})
					.then(res => {
						uni.showModal({
						    title: '提示',
						    content: res.msg,
						    showCancel: false, // 不显示取消按钮
						    success: function (res) {
						        if (res.confirm) {
									uni.reLaunch({
										url:"/pages/user/Login/index"
									})
						            console.log('用户点击了确认');
						            // 可以在这里执行点击确认后的操作
						        }
						    }
						});
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'success',
						// 	duration: 2000,
						// })
						// that.formItem = 1
					})
					.catch(err => {
						uni.showToast({
							title: err?.msg || err?.response?.data?.msg || err?.response?.data?.message,
							icon: 'none',
							duration: 2000,
						})
						
					})
			},
			// 获取验证码



			async submit() {
				const {
					account,
					password
				} = this
				try {
					await this.$validator({
						account: [required(required.message('账号')), attrs.range([5, 16], attrs.range.message(
							'账号')), alpha_num(alpha_num.message('账号'))],
						password: [required(required.message('密码')), attrs.range([6, 16], attrs.range.message(
							'密码')), alpha_num(alpha_num.message('密码'))],
					}).validate({
						account,
						password,
					})
				} catch (e) {
					return validatorDefaultCatch(e)
				}

				login({
						username: account,
						password,
						spread: cookie.get('spread'),
					})
					.then(res => {
						this.$store.commit('login', res.data.token, dayjs(res.data.expires_time))
						handleGetUserInfo()
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000,
						})
					})
			},
		},
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #E7F1FF 0%, #FFFFFF 100%);
	}
</style>

<style lang="scss" scoped>
	.login-btn {
		width: 610rpx;
		height: 96rpx;
		background: #005850;
		box-shadow: 0rpx 12rpx 9rpx 4rpx rgba(0, 19, 126, 0.11);
		border-radius: 50rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.login-btn1{
		width: 300rpx;
		height: 96rpx;
		background: #005850;
		box-shadow: 0rpx 12rpx 9rpx 4rpx rgba(0, 19, 126, 0.11);
		border-radius: 50rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx auto 0;
	}
	.doings{
		width: 630rpx;
		margin: 50rpx ;
		border-radius: 5px;
		background: #fff;
		box-shadow: 0rpx 12rpx 9rpx 4rpx rgba(0, 19, 126, 0.11);
		padding:100rpx 30rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		padding-top: 80rpx;
	}

	.logo1 {
		image {
			width: 180rpx;
			height: 180rpx;
			display: block;
			margin: 160rpx auto 80rpx;
		}

	}

	.subTit {
		ont-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 45rpx;
		color: #000000;
		text-align: center;
	}

	.modal {
		width: 80%;

		.title {
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.modal-xy {
			text-align: justify;
			padding: 40rpx;
			// height: 100rpx;
			// line-height: 100rpx;
			// text-align: center;
			font-family: PingFang SC, PingFang SC;

			font-size: 28rpx;
			color: #000000;
		}
	}

	.normal-login-container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;

		// min-height: 90vh;
		.deco1 {
			position: absolute;
			width: 195rpx;
			height: 357rpx;
			left: 0rpx;
			top: 30rpx;
		}

		.deco2 {
			position: absolute;
			width: 104rpx;
			height: 297rpx;
			right: 0rpx;
			top: 239rpx;
		}

		.image-container {
			position: relative;
			width: 100%;
			height: 440rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;

			.login-image {
				width: 100%;
				height: 100%;
			}


			.login-text-s {
				position: absolute;
				top: 270rpx;
				left: 70rpx;
			}
		}

		.login-discribe {
			margin-top: 73rpx;
			padding: 0 70rpx;
			font-size: 32rpx;
			font-weight: 600;
		}

		.login-form-content {
			margin-top: 88rpx;
			text-align: center;
			width: 100%;
			padding: 0 65rpx;

			.input-item {
				margin: 0 auto 40rpx;
				width: 610rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				display: flex;
				align-items: center;



				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

				.phoneInput {
					// width: 70%;
					flex: 1;
					// background: pink;
				}

				.phoneCode {
					// width: 30%;
					margin-right: 20rpx;
					text-align: center;
					color: #ffffff;
					// background-color: #f35749;
					padding: 12rpx;
					color: #005850;
					font-size: 28rpx;
					border-radius: 30rpx;
					text-decoration: underline;
				}

			}

			
		}


		.text-blue {
			font-size: 28rpx;
			color: #005850;
			margin-left: 8rpx;
		}

		.login-icon {
			width: 46rpx;
			margin-left: 40rpx;
		}
	}

	.hint {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		font-size: 25rpx;
		color: #000;

		.link {
			color: #005850;
		}
	}

	.register .whiteBg .title .item {
		border-bottom: 2px solid;
	}

	.register {
		display: inline-block;
		color: #005850;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		float: right;
		padding: 20rpx 70rpx;
	}

	.register-link {
		font-size: 28rpx;
		float: right;
		padding: 0 16rpx;
	}

	.xieyi {
		margin-top: 210rpx;
		text-align: center;
		width: 100%;
		font-family: PingFang SC;
		font-weight: 400;

		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
		// line-height: 58rpx;
	}
</style>